<!DOCTYPE html>

<html>
<head>
  <title>countdownChristmasView.coffee</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
  <link rel="stylesheet" media="all" href="docco.css" />
</head>
<body>
  <div id="container">
    <div id="background"></div>
    
      <ul id="jump_to">
        <li>
          <a class="large" href="javascript:void(0);">Jump To &hellip;</a>
          <a class="small" href="javascript:void(0);">+</a>
          <div id="jump_wrapper">
          <div id="jump_page">
            
              
              <a class="source" href="app.html">
                app.coffee
              </a>
            
              
              <a class="source" href="appInstance.html">
                appInstance.coffee
              </a>
            
              
              <a class="source" href="appMessages.html">
                appMessages.coffee
              </a>
            
              
              <a class="source" href="appSettings.html">
                appSettings.coffee
              </a>
            
              
              <a class="source" href="baseList.html">
                baseList.coffee
              </a>
            
              
              <a class="source" href="baseModel.html">
                baseModel.coffee
              </a>
            
              
              <a class="source" href="countdown.html">
                countdown.coffee
              </a>
            
              
              <a class="source" href="countdownList.html">
                countdownList.coffee
              </a>
            
              
              <a class="source" href="eggTimer.html">
                eggTimer.coffee
              </a>
            
              
              <a class="source" href="scheduledTwitter.html">
                scheduledTwitter.coffee
              </a>
            
              
              <a class="source" href="aboutView.html">
                aboutView.coffee
              </a>
            
              
              <a class="source" href="baseView.html">
                baseView.coffee
              </a>
            
              
              <a class="source" href="countdownChristmasView.html">
                countdownChristmasView.coffee
              </a>
            
              
              <a class="source" href="countdownView.html">
                countdownView.coffee
              </a>
            
              
              <a class="source" href="eggTimerView.html">
                eggTimerView.coffee
              </a>
            
              
              <a class="source" href="indexView.html">
                indexView.coffee
              </a>
            
              
              <a class="source" href="statsView.html">
                statsView.coffee
              </a>
            
          </div>
        </li>
      </ul>
    
    <ul class="sections">
        
          <li id="title">
              <div class="annotation">
                  <h1>countdownChristmasView.coffee</h1>
              </div>
          </li>
        
        
        
        <li id="section-1">
            <div class="annotation">
              
              <div class="pilwrap for-h2">
                <a class="pilcrow" href="#section-1">&#182;</a>
              </div>
              <h2>COUNTDOWN VIEW</h2>

            </div>
            
        </li>
        
        
        <li id="section-2">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-2">&#182;</a>
              </div>
              <p>This is the countdown view.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre><span class="class"><span class="keyword">class</span> <span class="title">CountdownChristmasView</span> <span class="keyword">extends</span> <span class="title">window</span>.<span class="title">App</span>.<span class="title">BaseView</span></span></pre></div></div>
            
        </li>
        
        
        <li id="section-3">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-3">&#182;</a>
              </div>
              <p>Init the view.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    init: =&gt;
        <span class="property">@setDom</span> [<span class="string">"#cdTitle"</span>, <span class="string">"#cdTimer"</span>, <span class="string">"#cdOnEndMessage"</span>, <span class="string">"#sound"</span>]
        <span class="property">@setEvents</span>()</pre></div></div>
            
        </li>
        
        
        <li id="section-4">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-4">&#182;</a>
              </div>
              <p>Bind events to DOM elements.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    setEvents: =&gt;
        <span class="property">@dom</span>.cdTimer.countdown {callback: <span class="property">@onFinish</span>}</pre></div></div>
            
        </li>
        
        
        <li id="section-5">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-5">&#182;</a>
              </div>
              <p>When countdown has finished, send a notification to the server and update
the view to show the <code>onEndMessage</code>.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    onFinish: =&gt;
        url = <span class="property">@dom</span>.cdOnEndMessage.text().replace <span class="string">"http://"</span>, <span class="string">""</span></pre></div></div>
            
        </li>
        
        
        <li id="section-6">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-6">&#182;</a>
              </div>
              <p>Play sound if <code>playSound</code> is true.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        <span class="keyword">if</span> <span class="property">@dom</span>.sound?.length &gt; <span class="number">0</span>
            <span class="property">@dom</span>.sound.trigger <span class="string">"play"</span>
            <span class="keyword">if</span> App.Settings.General.debug
                console.log <span class="string">"CountdownView.onFinish"</span>, <span class="string">"Play sound."</span></pre></div></div>
            
        </li>
        
        
        <li id="section-7">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-7">&#182;</a>
              </div>
              <p>If message is an YouTube URL, then embed an iframe with the video.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        <span class="keyword">if</span> url.indexOf(<span class="string">"youtube.com/"</span>) <span class="keyword">is</span> <span class="number">0</span> <span class="keyword">or</span> url.indexOf(<span class="string">"youtu.be/"</span>) <span class="keyword">is</span> <span class="number">0</span>
            <span class="property">@embedYouTube</span> url</pre></div></div>
            
        </li>
        
        
        <li id="section-8">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-8">&#182;</a>
              </div>
              <p>If message is a Vimeo URL, embed an iframe with the video.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        <span class="keyword">else</span> <span class="keyword">if</span> url.indexOf(<span class="string">"vimeo.com/"</span>) <span class="keyword">is</span> <span class="number">0</span>
            <span class="property">@embedVimeo</span> url</pre></div></div>
            
        </li>
        
        
        <li id="section-9">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-9">&#182;</a>
              </div>
              <p>No YouTube video, only show the message.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        <span class="keyword">else</span>
            <span class="property">@dom</span>.cdOnEndMessage.fadeIn App.Settings.UI.fadeInterval
            <span class="keyword">if</span> App.Settings.General.debug
                console.log <span class="string">"CountdownView.onFinish"</span>, <span class="string">"Show message: <span class="subst">#{@dom.cdOnEndMessage.text()}</span>"</span></pre></div></div>
            
        </li>
        
        
        <li id="section-10">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-10">&#182;</a>
              </div>
              <p>Embed the YouTube video set on the <code>onEndMessage</code>.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    embedYouTube: (url) =&gt;
        videoId = url
        videoId = videoId.replace <span class="string">"www."</span>, <span class="string">""</span>
        videoId = videoId.replace <span class="string">"youtube.com"</span>, <span class="string">""</span>
        videoId = videoId.replace <span class="string">"youtu.be"</span>, <span class="string">""</span>
        videoId = videoId.replace <span class="string">"watch?v="</span>, <span class="string">""</span>
        videoId = videoId.replace <span class="string">"/"</span>, <span class="string">""</span>
        src = <span class="string">"http://www.youtube.com/embed/<span class="subst">#{videoId}</span>?rel=0&amp;autoplay=1"</span></pre></div></div>
            
        </li>
        
        
        <li id="section-11">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-11">&#182;</a>
              </div>
              <p>Create YouTube iframe and append after the countdown&#39;s title.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        iframe = $(document.createElement <span class="string">"iframe"</span>)
        iframe.attr <span class="string">"scrolling"</span>, <span class="string">"no"</span>
        iframe.attr <span class="string">"width"</span>, <span class="number">640</span>
        iframe.attr <span class="string">"height"</span>, <span class="number">360</span>
        iframe.attr <span class="string">"frameborder"</span>, <span class="number">0</span>
        iframe.attr <span class="string">"src"</span>, src
        <span class="property">@appendMedia</span> iframe

        <span class="keyword">if</span> App.Settings.General.debug
            console.log <span class="string">"CountdownView.embedYouTube"</span>, src</pre></div></div>
            
        </li>
        
        
        <li id="section-12">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-12">&#182;</a>
              </div>
              <p>Embed the Vimeo video set on the <code>onEndMessage</code>.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    embedVimeo: (url) =&gt;
        videoId = url
        videoId = videoId.replace <span class="string">"www."</span>, <span class="string">""</span>
        videoId = videoId.replace <span class="string">"vimeo.com"</span>, <span class="string">""</span>
        videoId = videoId.replace <span class="string">"/"</span>, <span class="string">""</span>
        src = <span class="string">"http://player.vimeo.com/video/<span class="subst">#{videoId}</span>?autoplay=1"</span></pre></div></div>
            
        </li>
        
        
        <li id="section-13">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-13">&#182;</a>
              </div>
              <p>Create Vimeo iframe and append after the countdown&#39;s title.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        iframe = $(document.createElement <span class="string">"iframe"</span>)
        iframe.attr <span class="string">"scrolling"</span>, <span class="string">"no"</span>
        iframe.attr <span class="string">"width"</span>, <span class="number">640</span>
        iframe.attr <span class="string">"height"</span>, <span class="number">360</span>
        iframe.attr <span class="string">"frameborder"</span>, <span class="number">0</span>
        iframe.attr <span class="string">"src"</span>, src
        <span class="property">@appendMedia</span> iframe

        <span class="keyword">if</span> App.Settings.General.debug
            console.log <span class="string">"CountdownView.embedVimeo"</span>, src</pre></div></div>
            
        </li>
        
        
        <li id="section-14">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-14">&#182;</a>
              </div>
              <p>Embed a media element (video from YouTube or Vimeo, music from SoundCloud, etc...)
on the page right after the countdown&#39;s title.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    appendMedia: (obj) =&gt;
        <span class="property">@dom</span>.cdTimer.fadeOut App.Settings.UI.fadeInterval, =&gt; <span class="property">@dom</span>.cdTitle.after obj</pre></div></div>
            
        </li>
        
        
        <li id="section-15">
            <div class="annotation">
              
              <div class="pilwrap for-h2">
                <a class="pilcrow" href="#section-15">&#182;</a>
              </div>
              <h2>APPEND VIEW TO WINDOW</h2>

            </div>
            
        </li>
        
        
        <li id="section-16">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-16">&#182;</a>
              </div>
              
            </div>
            
            <div class="content"><div class='highlight'><pre>window.App.currentView = <span class="keyword">new</span> CountdownChristmasView()</pre></div></div>
            
        </li>
        
    </ul>
  </div>
</body>
</html>
